<template>
    <div id="radar">
      <v-chart :options="options" />
    </div>
  </template>
  
  <script lang="ts">
  import * as echarts from "echarts/core";
  import { RadarChart } from "echarts/charts";
  import { RadarComponent, TitleComponent, TooltipComponent } from "echarts/components";
  import { CanvasRenderer } from "echarts/renderers";
  import ECharts from "vue-echarts";
  import http from '../../http/index.js'
  
  echarts.use([RadarComponent, TitleComponent, TooltipComponent, RadarChart, CanvasRenderer]);
  
  interface RadarOption {
    title: { text: string };
    radar: { indicator: { name: string; max: number }[] };
    series: Array<{
      name: string;
      type: string;
      data: Array<{ value: number[]; name: string }>;
    }>;
  }
  
  export default {
    name: "ClassroomFigure",
    components: {
      "v-chart": ECharts,
    },
    props: {
      classroomId: {
        type: String,
        required: true
      }
    },
    data() {
      const indicator: { name: string; max: number }[] = [
        { name: "学生成绩", max: 100 },
        { name: "学生活跃度", max: 100 },
        { name: "学生完课率", max: 100 },
        { name: "非班级课程数量", max: 100 },
      ];
      const value: number[] = [60, 90, 85, 75];
      const options: RadarOption = {
        title: {
          text: "班级画像",
        },
        radar: {
          indicator: indicator,
        },
        series: [
          {
            name: "班级画像雷达图",
            type: "radar",
            data: [
              {
                value: value,
                name: "班级画像雷达图",
              },
            ],
          },
        ],
      };
      return { indicator, value, options };
    },
    mounted() {
      this.fetchRadarData();
    },
    methods: {
      init() {
        this.getRadarData();
      },
      getRadarData() {
        let radar = echarts.init(document.getElementById("radar") as HTMLElement);
        radar.setOption(this.options);
      },
      fetchRadarData() {

        //从后端通过班级ID获取雷达图数据
        http({
          method: 'get',
          url: '/api/classroom/radar',
          params: {
            classroomId: this.classroomId
          }
        }).then(res => {
          if (res) {
            // score":0.04,"nonClassCourseCount":7,"completionRate":11,"activity":44
            const list = [res.score, res.activity, res.completionRate, res.nonClassCourseCount]
            this.options.series[0].data = [{
              value: list,
              name: "班级画像雷达图"
            }];
            this.getRadarData();
        }
      }).catch(error => {
        console.error(error);
      });
      },
    },
  };
  </script>
  
  <style scoped>
  #radar {
    width: auto;
  }
  .info-header {
    background-color: #409eff;
      color: white;
      padding: 10px 20px;
      margin: 0;
      font-family: "Segoe UI", "Roboto", "Oxygen",
        "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
        sans-serif; 
      text-shadow: 0px 2px 4px rgba(0,0,0,0.2); 
      border-bottom: 3px solid #307AFF; 
  }
  </style>
  